<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/transform-demo.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- <p></p> -->
    <!-- <div class="wrap"></div> -->
    <!-- <div class="wrapapp"></div> -->
    <!-- <div id="container">
      <div class="blue"></div>
      <div class="green"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="blue"></div>
      <div class="green"></div>
      <div class="blue"></div>
    </div> -->
    <!-- <div class="container">
      <div class="element">11111</div> -->
    <!-- <div class="inner-wrapper">
        <img class="blending-image" src="../img/avatar.png" alt="Rorona" />
      </div> -->
    <!-- </div> -->
    <!-- <div class="ddd">ddd</div>
    <div class="box">
      <div>000</div>
    </div> -->
    <div id="wrap">
      <!-- 获取任意 Dom 节点上的 CSS 变量 -->
      <div class="box2">第二个盒子</div>
      <!-- 修改一个 Dom 节点上的 CSS 变量 -->
      <div class="box3">第三个盒子</div>
    </div>

    <div id="btn-wrap">
      <!-- 获取任意 Dom 节点上的 CSS 变量 -->
      <button>按钮2</button>
      <!-- 修改一个 Dom 节点上的 CSS 变量 -->
      <button>按钮3</button>
    </div>
    <script>
      var btn = document.getElementsByTagName("button");
      var div = document.getElementById("wrap").getElementsByTagName("div");
      //获取任意 Dom 节点上的 CSS 变量
      btn[0].onclick = function () {
        var Box2Style = getComputedStyle(div[0]).getPropertyValue("--yellow");
        console.log(Box2Style);
      };
      //修改一个 Dom 节点上的 CSS 变量
      btn[1].onclick = function () {
        div[1].style.setProperty("--blue", "white");
        var Box3Style = getComputedStyle(div[1]).getPropertyValue("--blue");
        console.log(Box3Style);
      };
    </script>
  </body>
</html>
